<template>
    <div id="box">
    <transition id="box" appear tag="div">
    <div class="container">
        <div class="avatarContainer">
            <div class="avatar">
                <el-avatar v-if="$store.state.user!=''" :src="$url+$store.state.user.avatar" alt=""></el-avatar>
                <el-avatar  v-else  :src="circleUrl"></el-avatar>
            </div>
            <div class="cityContainer">
                <div class="city">
                    <span style="font-size: 16px;font-weight:900;margin-right: 5px;">广州</span>
                    <span class="el-icon-arrow-down"></span>
                </div>
                <div class="weather"><span>大雨 </span><span>15℃</span></div>
            </div>
        </div>

        <div class="searchContainer">
            <input type="text" name="" placeholder="夜宵时刻，点个外卖" id="">
        </div>

        <div style="line-height: 50px;display: flex;justify-content: center;align-items: center;">
            <span class="el-icon-plus"></span></div>

    </div>
</transition>
        

    </div>
</template>
<script>
    export default {
        data(){
            return {
                circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            }
        }
    }
</script>
<style lang='less' scoped>
    * {
        padding: 0;
        margin: 0;
    }
/* v-enter 【进入之前，元素的起始状态】 */
/* v-leave-to 【动画离开之后，离开的终止状态】 */
.v-enter,
.v-leave-to {
    opacity: 0;
    transform: translateX(-150px);
}
/* v-enter-active 【入场动画的时间段】 */
/* v-leave-active 【离场动画的时间段】 */
.v-enter-active,
.v-leave-active{
    transition: all 0.8s ease;
}
    #box {
        background: #FFC810;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .container{
        width: 95%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .avatar img{
            width: 40px;
            border-radius:50%;
        }
    .searchContainer{
        flex: 4;
        height: 44px;
        display: flex;
        justify-content: center;
        align-items: center;
        
    }
    input{
        height: 95%;
        width:80%;
        border-radius:15px;
        border:none;
        padding-left: 20px;
    }
    .weather{
        display: flex;
        justify-content: space-between;
        flex-direction: row;
    }
    .avatarContainer{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .cityContainer{
            padding-left: 10px;
        }
    }

</style>